<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/issue.css" />
</head>

<body>
	<div id="app" class="content">
		<div class="name">
			<span class="title m-b-10">活动标题</span>
			<div class="input p-b-10">
				<input type="text" v-model="issueData.actTitle" placeholder="为你的活动起个响亮的名字" />
			</div>
		</div>
		<div class="photo">
			<span class="title m-b-10">活动展示图</span>
			<span class="font-c-7f m-b-10">最多6张，首图为默认头图</span>
			<div class="img-wapper">
				<div class="preview" v-for="(item,index) in listImg" v-if="listImg.length > 0">
					<i class="delete" @click="deleteClick(index)"></i>
					<img :src="item" @click="getItemImgClick(index)">
				</div>
				<div class="button" @click="addImgClick">
					<img src="../../../images/add.png">
				</div>
			</div>
		</div>

		<div class="list">
			<div class="item">
				<img class="icon" src="../images/location.png">
				<input type="text" v-model="issueData.actLocation" placeholder="活动地点" />
			</div>
			<div class="item">
				<img class="icon" src="../images/friends.png">
				<input type="number" v-model="issueData.actNumberOfPeople" placeholder="允许参加人数(不填写默认不限制)" />
			</div>
			<div class="nape">
				<img class="icon" src="../images/time.png">
				<div>
					<div class="item font-c-7f" @click="actStartTimeTap">
						<span class="font-c-min" v-if="issueData.actStartTime" v-text="issueData.actStartTime"></span>
						<span v-else>活动开始时间</span>
						<span class="mui-icon mui-icon-forward"></span>
					</div>
					<div class="item font-c-7f" @click="actEndTimeTap">
						<span class="font-c-min" v-if="issueData.actEndTime" v-text="issueData.actEndTime"></span>
						<span v-else>活动结束时间</span>
						<span class="mui-icon mui-icon-forward"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="details">
			<span class="title m-b-10">活动详情</span>
			<textarea rows="5" cols="2" v-model="issueData.actdDetails" placeholder="活动详情"></textarea>
		</div>
		<div class="botton-wapper" @click="issueTap">发布</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
		})
		var app = new Vue({
			el: "#app",
			data: {
				listImg: [],
				issueData: {
					actTitle: '',
					actdDetails: '',
					actLocation: '',
					actStartTime: '',
					actEndTime: '',
					actNumberOfPeople: ''
				}
			},
			methods: {
				issueTap: function () { // 发布方法
					this.issueData.actNumberOfPeople = this.issueData.actNumberOfPeople ?
						this.issueData.actNumberOfPeople : '0';
					var issueData = this.issueData
					var isGo
					if (this.listImg.length == 0) { // 判断图片是否填写完整
						mui.toast('请上传图片')
						isGo = false
					} else {
						isGo = true
					}

					this.verification(issueData, function (sate) { // 判断所有值都是否填写完整
						if (!sate) {
							isGo = false
							return
						}
					})
					console.log(isGo)
					if (isGo) {
						console.log('调接口')
						this.PostActivity(issueData) // 调用发布接口
					}
				},

				verification: function (data, callback) { // 字符串遍历 判断是否都填写完整
					Object.keys(data).forEach(function (key) {
						if (!data[key]) {
							mui.toast("请填写完整")
							return callback(false)
						}
					});
				},

				PostActivity: function (data) { //post发布接口 
					var that = this;
					var userID = Util.getState('$state').userID;
					var neiID = Util.getState('neiID').neiID;
					mui.post(Util.HTTP + 'api/Activity/PostActivity', {
						neiID: neiID,
						userID: userID,
						actTitle: data.actTitle,
						actdDetails: data.actdDetails,
						actLocation: data.actLocation,
						actStartTime: data.actStartTime,
						actEndTime: data.actEndTime,
						actNumberOfPeople: data.actNumberOfPeople
					}, function (res) {
						if (res.code == '1001') {
							// 发布成功后调用图片方法
							that.ActivityImg(res.data, function (seta) {
								// callback上传回调事件
								if (seta) {
									mui.toast('发布成功')
								} else {
									mui.toast('上传图片失败，未能发布')
								}
								setTimeout(function () {
									mui.back()
									var list = plus.webview.currentWebview().opener();
									//触发父页面的自定义事件(refresh),从而进行刷新
									mui.fire(list, 'issueBack');
									//返回true,继续页面关闭逻辑
									return true;
								}, 1000)
							})
						} else {
							mui.toast(res.message)
						}
					})
				},

				ActivityImg: function (filesBizID, callback) { // 图片方法 调用上图片接口
					var that = this
					var server = Util.HTTP + 'api/Activity/ActivityImg';
					var imgList = that.listImg;
					var wt = plus.nativeUI.showWaiting();
					var task = plus.uploader.createUpload(server, {
							method: "POST"
						},
						function (t, status) { //上传完成
							if (status == 200) {
								wt.close(); //关闭等待提示按钮
								callback(true) // 上传成功回调事件
							} else {
								alert("上传失败：" + status);
								wt.close(); //关闭等待提示按钮
								callback(false) // 上传失败回调事件
							}
						}
					);
					//添加其他参数
					task.addData("filesBizID", filesBizID);
					imgList.forEach(function (item, num) {
						task.addFile(item, {
							key: item
						});
					})
					task.start();
				},
				getItemImgClick: function (num) {
					var listImg = this.listImg
					plus.nativeUI.previewImage(listImg, {
						current: num
					})
				},
				deleteClick: function (num) {
					this.listImg.splice(num, 1)
				},
				addImgClick: function () {
					var that = this
					// 从相册中选择图片
					mui.toast('最多选择6张');
					plus.gallery.pick(function (e) {
						var lfs = e.files;
						that.listImg = e.files
					}, function (e) {
						mui.toast('取消选择图片');
					}, {
						filter: 'image',
						multiple: true,
						maximum: 6,
						system: false,
						onmaxed: function () {
							plus.nativeUI.alert('最多只能选择6张图片');
						}
					});
				},
				actStartTimeTap: function () {
					var that = this;
					var presentDate = Util.getNowDate().time
					plus.nativeUI.pickDate(function (e) {
						var d = e.date;
						plus.nativeUI.pickTime(function (e) {
							var w = e.date;
							var Minutes = w.getMinutes() > 10 ? w.getMinutes() : '0' + w.getMinutes()
							console.log("选择的时间：" + w.getHours() + ":" + w.getMinutes());
							var actStartTime = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + w.getHours() +
								":" + Minutes + ":" + "00";
							if (compareDate(actStartTime, presentDate)) {
								that.issueData.actStartTime = actStartTime
							} else {
								mui.toast('不能小于当前时间')
							}
						});
					});
				},
				actEndTimeTap: function () {
					var that = this;
					if (!that.issueData.actStartTime) {
						mui.toast('请先选择开始时间')
						return
					}
					plus.nativeUI.pickDate(function (e) {
						var d = e.date;
						plus.nativeUI.pickTime(function (e) {
							var w = e.date;
							var Minutes = w.getMinutes() > 10 ? w.getMinutes() : '0' + w.getMinutes()
							console.log("选择的时间：" + w.getHours() + ":" + w.getMinutes());
							var actEndTime = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + w.getHours() +
								":" + Minutes + ":" + "00";
							if (compareDate(actEndTime, that.issueData.actStartTime)) {
								that.issueData.actEndTime = actEndTime
							} else {
								mui.toast('不能小于开始时间')
							}
						});
					});

				},
			},
		})


		function compareDate(s1, s2) {
			return ((new Date(s1.replace(/-/g, "\/"))) > (new Date(s2.replace(/-/g, "\/"))));
		}
	</script>
</body>

</html>
